<script type="text/x-template" id="sub-menu">
  <a-sub-menu v-bind="$props" v-on="$listeners" :key="menus.key">
    <span slot="title">
      <a-icon :type="menus.icon"></a-icon>
      <span><% menus.title %></span>
    </span>
    <template v-for="model in menus.subs">
      <a-menu-item v-if="!model.subs" :key="model.key" :title="model.title">
        <a-icon :type="model.icon"></a-icon>
        <span><% model.title %></span>
      </a-menu-item>
      <sub-menu v-else :menus="model" :key="model.key"></sub-menu>
    </template>
  </a-sub-menu>
</script>

<script type="application/javascript">
  Vue.component('sub-menu', {
    delimiters: ['<%', '%>'],
    isSubMenu: true,
    props: {
      ...antd.Menu.SubMenu.props,
      menus: {
        type: Object,
        required: true
      }
    },
    template: '#sub-menu'
  });
</script>